<template>
  <div>
  
     <!-- table -->
    <el-card>
     <div class="row">
        <el-button @click="addRow" type="primary">新增角色</el-button>
     </div>
     <Tabel 
     :border="border"
    :tableData='role'
    :tableColum='tableColum'
    @rowoperation='rowoperation'
  
  ></Tabel>
    </el-card>
   
    <!-- add -->
    <el-dialog
    title="提示"
    :visible.sync="adddialogVisible"
    width="50%"
    :before-close="handleClose">
    <el-form  ref="addform"  :model="addForm" label-width="80px">
     <el-form-item label="角色" >
        <el-input v-model="addForm.name"></el-input>
     </el-form-item>
     <el-form-item label="角色描述" >
        <el-input  v-model="addForm.description"></el-input>
     </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="adddialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="add">确 定</el-button>
    </span>
  </el-dialog>
  <!-- edit  -->
  <Dialog
  @cnacel='Editcnacel'
  @confirm='Editconfirm'
  :searchData="authgroupForm"
  :searchForm="searchForm"
  :show.sync="EditdialogVisible"
   title='编辑角色'
   
  ></Dialog>
  <!-- 分配权限 -->
  <el-dialog
<<<<<<< HEAD
  title="提示"
  :visible.sync="adddialogVisible"
  width="50%"
  :before-close="handleClose">
  <el-form  ref="addform"  :model="addForm" label-width="80px">
   <el-form-item label="角色" >
      <el-input v-model="addForm.name"></el-input>
   </el-form-item>
   <el-form-item label="角色描述" >
      <el-input  v-model="addForm.description"></el-input>
   </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="adddialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="add">确 定</el-button>
  </span>
</el-dialog>
<!-- edit  -->
<Dialog
@cnacel='Editcnacel'
@confirm='Editconfirm'
:searchData="authgroupForm"
:searchForm="searchForm"
:show.sync="EditdialogVisible"
 title='编辑角色'
 
></Dialog>
<!-- 分配权限 -->
<el-dialog
  title="提示"
  :visible.sync="sharedialogVisible"
  width="30%"
  :before-close="handleClose">
  <el-tree
  :data="data"
  show-checkbox
  node-key="id"
  :default-expanded-keys="[2, 3]"
  :default-checked-keys="[5]"
  :props="defaultProps">
</el-tree>
  <span slot="footer" class="dialog-footer">
    <el-button @click="sharedialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="sharedialogVisible = false">确 定</el-button>
  </span>
</el-dialog>
<!-- 分配权限 -->
<el-dialog
  title="分配权限"
  :visible.sync="sharedialogVisible"
  width="50%"
  :before-close="handleClose">
  <el-tree
  default-expand-all
  :data="permission"
  show-checkbox
  ref="tree"
  node-key="id"
  :default-checked-keys="permIds"
  :props="defaultProps">
</el-tree>
  <span slot="footer" class="dialog-footer">
    <el-button @click="sharedialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="share">确 定</el-button>
  </span>
</el-dialog>
</div>
</template>
<script>
  import arrayToTree from "array-to-tree";
   import Tabel from '@/components/global/table.vue'
   import Dialog from '@/components/global/Dialog.vue'
    import {sysrole,addRole,DelRole,EditRole,roleDetail,permission,assignPrem} from '@/api/http'
    export default {
    components:{Tabel, Dialog},
    data() {
      return {
         border:true,
         role:[],
         total:0,
        
         tableColum:[{
        prop:'name',
        lable:'角色',

      },
      {
        prop:'description',
        lable:'描述',
      },
      {
  lable:'操作',
  type:'optBut',
  size:'mini',
  operations:[{
    label:'分配权限',
    method:'share',
    type:'success'
  },
  {
    label:'编辑',
    method:'edit',
    type:'primary'
  },
  {
    label:'删除',
    method:'delete',
    type:'danger'
  },
  
]
 },
       
      
],
       adddialogVisible:false,
       addForm:{
         name:'',
         description:''
        },
        EditdialogVisible:false,
        authgroupForm: {
          id:'',
        name:'',
        description:'',
        permIds:[]
        },
        searchForm: [
        {
          type: "Input",
          label: "名称",
          prop: "name",
          width: "120px",
          // disabled: true,
          isFormItemShow: true
        },
        {
          type: "Input",
          label: "角色描述",
          prop: "description",
          width: "120px",
          isFormItemShow: true
        },
      
      ],
      editForm:{
        id:'',
        name:'',
        description:'',
        permIds:[]
      },
      sharedialogVisible:false,
      permission:[],
      defaultProps: {
          children: 'children',
          label: 'name'
        },
        permIds:[],
        id:'',
      
        
      }
    },
    created() {
     this.getrole()
    },
    methods: {
  async  getrole(){
      const {data: res} = await sysrole()
      console.log(res)
      this.role = res.data.rows
      this.total = res.data.total

    },
    // 操作按钮
async    rowoperation(row,method){
      console.log('父组件',row,method)
       console.log(row.id)
      if(method==='share'){
          console.log('share')
          this.getpermission()  
          this.getroleDetail(row.id)
          this.id = row.id
          this.sharedialogVisible =true

      }
      if(method==='edit'){
          console.log('edit')
          const {data :res} = await roleDetail(row.id)
          console.log('res',res)
          this.authgroupForm = res.data
          this.EditdialogVisible = true
          this.editForm.id = row.id
          this.$set(this.authgroupForm, 'name',res.data.name)
          this.$set(this.authgroupForm, 'description',res.data.description)
         
=======
    title="提示"
    :visible.sync="sharedialogVisible"
    width="30%"
    :before-close="handleClose">
    <el-tree
    :data="data"
    show-checkbox
    node-key="id"
    :default-expanded-keys="[2, 3]"
    :default-checked-keys="[5]"
    :props="defaultProps">
  </el-tree>
    <span slot="footer" class="dialog-footer">
      <el-button @click="sharedialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="sharedialogVisible = false">确 定</el-button>
    </span>
  </el-dialog>
  <!-- 分配权限 -->
  <el-dialog
    title="分配权限"
    :visible.sync="sharedialogVisible"
    width="50%"
    :before-close="handleClose">
    <el-tree
    default-expand-all
    :data="permission"
    show-checkbox
    ref="tree"
    node-key="id"
    :default-checked-keys="permIds"
    :props="defaultProps">
  </el-tree>
    <span slot="footer" class="dialog-footer">
      <el-button @click="sharedialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="share">确 定</el-button>
    </span>
  </el-dialog>
  </div>
  </template>
  <script>
    import arrayToTree from "array-to-tree";
     import Tabel from '@/components/global/table.vue'
     import Dialog from '@/components/global/Dialog.vue'
      import {sysrole,addRole,DelRole,EditRole,roleDetail,permission,assignPrem} from '@/api/http'
      export default {
      components:{Tabel, Dialog},
      data() {
        return {
           border:true,
           role:[],
           total:0,
>>>>>>> limit
          
           tableColum:[{
          prop:'name',
          lable:'角色',
  
        },
        {
          prop:'description',
          lable:'描述',
        },
        {
    lable:'操作',
    type:'optBut',
    size:'mini',
    operations:[{
      label:'分配权限',
      method:'share',
      type:'success'
    },
    {
      label:'编辑',
      method:'edit',
      type:'primary'
    },
    {
      label:'删除',
      method:'delete',
      type:'danger'
    },
    
  ]
   },
         
        
  ],
         adddialogVisible:false,
         addForm:{
           name:'',
           description:''
          },
          EditdialogVisible:false,
          authgroupForm: {
            id:'',
          name:'',
          description:'',
          permIds:[]
          },
          searchForm: [
          {
            type: "Input",
            label: "名称",
            prop: "name",
            width: "120px",
            // disabled: true,
            isFormItemShow: true
          },
          {
            type: "Input",
            label: "角色描述",
            prop: "description",
            width: "120px",
            isFormItemShow: true
          },
        
        ],
        editForm:{
          id:'',
          name:'',
          description:'',
          permIds:[]
        },
        sharedialogVisible:false,
        permission:[],
        defaultProps: {
            children: 'children',
            label: 'name'
          },
          permIds:[],
          id:'',
        
          
        }
      },
      created() {
       this.getrole()
      },
      methods: {
    async  getrole(){
        const {data: res} = await sysrole()
        console.log(res)
<<<<<<< HEAD
        this.permission = res.data
        this.permission =  arrayToTree(this.permission, {
      parentProperty: "pid",
      customID: "id",
      childrenProperty: "children",
    });
    console.log(this.permission)
    
       
      
      },
      // 获取当前角色权限
     async  getroleDetail(id){
      const {data :res} = await roleDetail(id)
      console.log(res)
      this.permIds = res.data.permIds
      console.log('permIds',this.permIds)
      const arr =[]
      this.permIds.forEach(item=>{
          console.log(item)
          arr.push(item)

      })
      
      console.log('arr',arr)
      
     },
   async  share(){
      const keys=[
       ...this.$refs.tree.getCheckedKeys(),
      ...this.$refs.tree.getHalfCheckedKeys()
      ]
      console.log(keys)
       const {data :res} = await assignPrem({id:this.id,permIds:keys})
       console.log(res)
       this.permIds = keys
       if(res.code===10000){
        this.$message.success(res.message)
       }else{
        this.$message.error(res.message)
       }


      // this.$refs.tree()
     },
    },

=======
        this.role = res.data.rows
        this.total = res.data.total
  
      },
      // 操作按钮
  async    rowoperation(row,method){
        console.log('父组件',row,method)
         console.log(row.id)
        if(method==='share'){
            console.log('share')
            this.getpermission()  
            this.getroleDetail(row.id)
            this.id = row.id
            this.sharedialogVisible =true
  
        }
        if(method==='edit'){
            console.log('edit')
            const {data :res} = await roleDetail(row.id)
            console.log('res',res)
            this.authgroupForm = res.data
            this.EditdialogVisible = true
            this.editForm.id = row.id
            this.$set(this.authgroupForm, 'name',res.data.name)
            this.$set(this.authgroupForm, 'description',res.data.description)
           
            
        }
        if(method==='delete'){
            console.log('delete')
            {
          this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(async() => {
           const {data: res} = await DelRole(row.id)
           console.log(res)
           if(res.code ===10000){
        this.$message.success('删除角色成功')
        this.getrole()
      }
      else{
        this.$message.error('删除角色失败')
      }
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });          
          });
        }
      
  
             
        }
       
  
      },
      addRow(){
        console.log('add')
        this.adddialogVisible = true
        // const res = await addRole()
      },
   async   add(){
        console.log('add')
      const {data :res} =  await addRole(this.addForm)
      console.log(res)
      if(res.code ===10000){
        this.$message.success('添加角色成功')
        this.getrole()
        this.adddialogVisible = false
  
      }
      else{
        this.$message.error('添加角色失败')
      }
  
      },
        // 关闭编辑弹框
        Editcnacel(){
          this.EditdialogVisible = false
          console.log('EditdialogVisible')
        },
        // 编辑确认按钮
       async Editconfirm(){
        console.log('this.editForm',this.editForm)
            console.log('this.authgroupForm',this.authgroupForm)
        const {data :res} = await EditRole(this.authgroupForm.id,this.authgroupForm)
        // ordersForm 为表单绑定的:model值， 'address'的绑定input名称，第三项为值
       
        console.log('Editconfirm',res)
        if(res.code ===10000){
        this.$message.success('修改角色成功')
        this.getrole()
        this.EditdialogVisible = false
       
      }
      else{
        this.$message.error('修改角色失败')
      }
  
        // this.$message.error('添加员工失败')
        
        },
        // 获取权限点
      async  getpermission(){
          const {data:res} = await permission()
          console.log(res)
          this.permission = res.data
          this.permission =  arrayToTree(this.permission, {
        parentProperty: "pid",
        customID: "id",
        childrenProperty: "children",
      });
      console.log(this.permission)
      
         
        
        },
        // 获取当前角色权限
       async  getroleDetail(id){
        const {data :res} = await roleDetail(id)
        console.log(res)
        this.permIds = res.data.permIds
        console.log('permIds',this.permIds)
        const arr =[]
        this.permIds.forEach(item=>{
            console.log(item)
            arr.push(item)
  
        })
        
        console.log('arr',arr)
        
       },
     async  share(){
        const keys=[
         ...this.$refs.tree.getCheckedKeys(),
        ...this.$refs.tree.getHalfCheckedKeys()
        ]
        console.log(keys)
         const {data :res} = await assignPrem({id:this.id,permIds:keys})
         console.log(res)
         this.permIds = keys
         if(res.code===10000){
          this.$message.success(res.message)
         }else{
          this.$message.error(res.message)
         }
  
  
        // this.$refs.tree()
       },
      },
>>>>>>> limit
  
    
      
      }
      
      // this.$store.dispatch('getprofile')
      </script>
      <style  scoped>
        .row{
           padding: 10px 0;
        }
      </style>